<template>
    <div class="releaseShow">
        <div class="release_left">
            <ul style="margin-bottom: 4%;">
                <li v-for="(item, index) in news" :key="index" @click="toDetails(item)">
                    <div class="fl image" style="line-height: 150px;height: 150px;">
                        <el-image
                        style="width: 100%; height: 100%"
                        :src="item.img"
                        fit="cover">
                        </el-image>
                    </div>
                    <div class="fl text">
                        <p class="title">{{item.title}}</p>
                        <!-- <p v-html="item.text"></p> -->
                        <p v-text="item.text" style="min-height: 85px;"></p>
                        <p>
                            <span>发布人：{{item.nickname}}</span>
                            <span>发布时间：{{item.approveTime}}</span>
                            <span>新闻板块：{{item.name}}</span>
                            <!-- <i class="el-icon-view fr">   {{item.amount}}</i> -->
                        </p>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <vxe-pager
            style="position: absolute;right: 2%;bottom: 2%;border:none;"
            perfect
            size="mini"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.totalResult"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
            </vxe-pager>
        </div>
        <div class="release_right">
            <div class="top">
                <div>
                    <el-button type="primary" icon="el-icon-s-promotion" @click="toRelease">发布新闻</el-button>
                </div>
                <div>
                    {{ DraftNum }}
                    <p @click="todraft">草稿栏</p>
                </div>
                <div>
                    {{ releseLen }}
                    <p>已发布</p>
                </div>
            </div>
            <div class="top" style="flex: 1;">
                <p style="text-align: left;margin-bottom: 15px;">审批中</p>
                <ul>
                    <li v-for="(item, index) in newsToApproval" :key="index" class="fl" style="text-align: left;width:100%;">
                        <p class="title" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{item.title}}</p>
                        <div class="image fl" style="margin-right: 5%;height: 90px;line-height: 90px;width:40%">
                            <el-image
                            style="width: 100%; height: 100%"
                            :src="item.img"
                            fit="cover">
                            </el-image>
                        </div>
                        <div class="fl" style="width: calc(100% - 45%); border-right: none;">
                            <p style="line-height:30px;">发布人：{{item.nickname}}</p>
                            <p style="line-height:30px;">发布时间：{{item.creatTime}}</p>
                            <p style="line-height:30px;">新闻板块：{{item.name}}</p> 
                        </div>
                        <el-divider></el-divider>
                    </li>
                </ul>
            </div>
            <!-- <div class="bottom">
                <p class="title">新闻板块</p>
                <el-divider></el-divider>
                <div v-for="(item, index) in NewsTemplate" :key="index">
                    {{ item.name }} 
                    <i class="el-icon-arrow-right fr"></i>
                    <el-divider></el-divider>
                </div>
            </div> -->
        </div>
    </div>
</template>
<style lang="scss" scoped>
.releaseShow{
    display: flex;
    flex-direction: row;
    .release_left, .top, .bottom{
        background-color: white;
        padding: 24px;
        border-radius: 2px;
    }
    .release_left{
        flex: 3;
        margin-right: 1%;
        position: relative;
        li{
            border-bottom: 1px solid #eee;
            display: inline-block;
            padding-bottom: 1%;
            width: 100%;
            max-height: 170px;
            overflow: hidden;
            .image{
                width: 15%;
                padding-right: 24px;
                img{
                    width: 100%;
                }
            }
            .text{
                width: 85%;
                p:nth-of-type(2){
                    line-height: 28px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
                p:nth-of-type(3){
                    color: #999;
                    line-height: 35px;
                    span{
                        padding: 0 30px 0 0;
                    }
                    i{
                        line-height: 35px;
                    }
                }
            }
        }
    }
    .release_right{
        flex: 1;
        display: flex;
        flex-direction: column;
        .top{
            margin-bottom: 20px;
            display: inline-block;
            width: 100%;
            text-align: center;
            div{
                width: 33%;
                float: left;
                border-right: 1px solid #eee;
            }
            div:nth-of-type(3){
                border-right: none;
            }
            .el-divider{
                width: 100% !important;
            }
            p:nth-of-type(n+2){
                font-size: 12px !important;
            }
        }
        .bottom{
            flex: 1;
            .el-button{
                float: right;
            }
        }
    }
}
</style>
<script>
// import $ from 'jquery'
import { getNewsAndNoticeInfo, getNewsTemplate,getDraftNum, getApprovalInfoByStatus } from '@/api/newsAndNotice'
export default {
    components:{},
    data(){
        return{
            news:[],
            NewsTemplate:[],
            // 分页
            tablePage: {
                currentPage: 1,
                pageSize: 8,
                pageSizes: [8, 16, 24, 32],
                totalResult: 0
            },
            // 已发布
            releseLen: null,
            DraftNum: null,
            //审批中
            newsToApproval: null
        }
    },
    methods:{
        init(page, limit){
            let result = []
            getNewsAndNoticeInfo(page,limit, 0, 1, 0).then(res => {
                console.log('新闻 res', res)
                result = JSON.parse(JSON.stringify(res.data))
                for(let i=0; i<result.length ; i++){
                    result[i]['text'] =  result[i]['text'].replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' '); 
                }
                this.tablePage.totalResult = res.count
                this.releseLen = res.count
                this.news = result
            })
            getApprovalInfoByStatus(page,limit,0,0).then(res => {
                console.log('审批中 res', res)
                this.newsToApproval = res.data
            })
        },
        // 审批中的
        
        initNew(){
            getNewsTemplate(0).then(res => {
                console.log('新闻板块 res', res)
                this.NewsTemplate = res.data.records
            })
        },
        getDraftNum(){
            getDraftNum(0, 0).then(res => {
                console.log('新闻草稿 res', res)
                this.DraftNum = res.count
            })
        },
        toRelease(){
            this.$router.push('/news/news_consult/add_article')
        },
        // 标签页
        handleClick(tab, event) {
            console.log(tab, event);
        },
        todraft(){
            this.$router.push({path: '/news/news_consult/news_consult__draft', query:{data:null}})
        },
        toDetails(data){
            this.$router.push({path: '/news/news_consult/newsinfo_details', query:{data:data}})
        }
    },
    created(){},
    mounted(){
        this.init(this.tablePage.currentPage, this.tablePage.pageSize)
        this.initNew()
        this. getDraftNum()
    },
}
</script>